<template>
	<view class="container">
		<!-- <view class="dataCard">
			<view class="inner">
				<view class="title">
					数据统计
				</view>
				<view class="bless-point-reward">
					<text>获得福分奖励</text>
					<text>1,000,000</text>
				</view>
				<view class="line"></view>	
				<view class="total-num">
					<view class="num-wrap">
						<view class="title">
							<view class="dot"></view>
							<text>总计拉新</text>
						</view>
						<text class="num">1940</text>
					</view>
					<view class="num-wrap">
						<view class="title">
							<view class="dot blue-dot"></view>
							<text>关注公众号并实名认证</text>
						</view>
						<text class="num">200</text>
					</view>
				</view>
			</view>
		</view> -->
		<view class="list">
			<view v-for="(item,index) in useDataResult.dataList" :key="index" class="item">
				<view class="left">
					<image v-if="item.headPic" class="" :src="item.headPic" style="border-radius: 50%;"></image>
					<image v-else class="" src="@/static/new/user/default-head.png"></image>
					<view class="desc">
						<view class="name">{{ item.realName || '游客' }}</view>
						<view class="tags">
							<view v-if="item.phone" class="is-realname">
								<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/baa6d2fc-a9c0-45fb-bd8a-ba50c6f40509.png" style="width: 22rpx;height: 20rpx;"></image>
								<text>已注册</text>
							</view>
							<view v-else class="is-no">
								<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/027a941f-1951-4b26-b837-bd8c80ff9e4f.png" style="width: 22rpx;height: 20rpx;"></image>
								<text>未注册</text>
							</view>
							<view v-if="item.isFollow === 1" class="is-follow">
								<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f7d90745-c131-4804-8e14-81c99393b316.png" style="width: 22rpx;height: 20rpx;"></image>
								<text>已关注</text>
							</view>
							<view v-else class="is-no">
								<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f7d90745-c131-4804-8e14-81c99393b316.png" style="width: 22rpx;height: 20rpx;"></image>
								<text>未关注</text>
							</view>
						</view>
					</view>
				</view>
				<view class="right">
					<view>{{ item.createdAt }}</view>
					<view v-if="item.isSuccess === 1" style="color: #24c789;">奖励已发放</view>
					<view v-else>奖励未发放</view>
				</view>
			</view>
		</view>
		<view class="list-tip-text" v-if="useDataResult.dataList.length != 0">{{ useDataResult.listTipText }}</view>
		<gzListNull :list="useDataResult.dataList"></gzListNull>
	</view>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue';
import { $inviteRecords } from '@/http/apiManager.js'
import useGetList from '@/hooks/useGetList.js'

const { useDataResult, getList } = useGetList($inviteRecords, data => data, { })

</script>

<style lang="less">
	.container{
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		position: relative;
		
		.dataCard{
			background: linear-gradient(to bottom,#25C88A, #48E4BB);
			width: 100%;
			height: 500rpx;
			position: relative;
			// background: linear-gradient( 180deg, rgba(246,247,252,0) 0%, #FFFFFF 84%, #FFFFFF 100%);
			z-index: 1;
			padding: 24rpx;
			box-sizing: border-box;
			&::after{
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				height: 250rpx;
				background: linear-gradient( 180deg, rgba(246,247,252,0) 0%, #FFFFFF 84%, #FFFFFF 100%);
				top: 250rpx;
				left: 0;
				z-index: -1;
			}
			.inner{
				position: relative;
				z-index: 2;
				width: 100%;
				box-sizing: border-box;
				// padding: 32rpx 24rpx;
				background: transparent;
				border-radius: 20rpx;
				background: linear-gradient( 180deg, rgba(255,255,255,0.72) 0%, #FFFFFF 34%, #FFFFFF 100%);
				box-shadow: inset 0rpx 0rpx 16rpx 4rpx #FFFFFF;
				border-radius: 20rpx;
				padding: 32rpx 26rpx;
				
				.title{
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
				.bless-point-reward{
					margin-top: 40rpx;
					text-align: center;
					text{
						&:nth-child(1){
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
						}
						&:nth-child(2){
							display: block;
							font-weight: bold;
							font-size: 48rpx;
							color: #333333;
							margin-top: 12rpx;
						}
					}
				}
				.line{
					height: 2rpx;
					background: #f0f0f0;
					margin: 40rpx 0;
				}
				.total-num{
					display: flex;
					justify-content: space-between;
					.num-wrap{
						width: 50%;
						text-align: center;
						.title{
							display: flex;
							gap: 10rpx;
							align-items: center;
							justify-content: center;
							margin-bottom: 18rpx;
							.dot{
								width: 8rpx;
								height: 16rpx;
								background: #FF8833;
								border-radius: 4rpx;
							}
							.blue-dot{
								background: #247FFF;
							}
							text{
								font-weight: 500;
								font-size: 24rpx;
								color: #666666;
							}
						}
						.num{
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
						}
					}
				}
			}
			
		}
		
		.list{
			padding: 16rpx 32rpx;
			
			.item{
				display: flex;
				justify-content: space-between;
				padding: 34rpx 0;
				border-bottom: 1rpx solid #e6e6e6;
				.left{
					display: flex;
					&>image{
						width: 96rpx;
						height: 96rpx;
						margin-right: 24rpx;
					}
					.desc{
						display: flex;
						flex-direction: column;
						gap: 20rpx;
						justify-content: center;
						.name{
							font-weight: bold;
							font-size: 30rpx;
							color: #333333;
						}
						.tags{
							display: flex;
							gap: 16rpx;
							view{
								width: 120rpx;
								height: 36rpx;
								border-radius: 12rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								gap: 5rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #FFFFFF;
								text{
									
								}
							}
							.is-realname{
								background: linear-gradient( 270deg, #FF8833 0%, #FFBD62 100%);
							}
							.is-follow{
								background: #24C789;
							}
							.is-no{
								background: #545C7D;
							}
							
						}
						
					}
				}
				
				.right{
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					justify-content: center;
					align-items: flex-end;
					view{
						&:nth-child(1){
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
						&:nth-child(2){
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
			}
		}
		.top{
			background: linear-gradient(to bottom, #48E4BB, #25C88A);
			width: 750rpx;
			height: 670rpx;
			position: relative;
			// background: linear-gradient( 180deg, rgba(246,247,252,0) 0%, #FFFFFF 84%, #FFFFFF 100%);
			z-index: 1;
			&::after{
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				height: 344rpx;
				background: linear-gradient( 180deg, rgba(246,247,252,0) 0%, #FFFFFF 84%, #FFFFFF 100%);
				top: 328rpx;
				left: 0;
				z-index: -1;
			}
			
			.nav{
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 999;
			}
			
			
			
			
		}
	}
</style>
